<!--
 * @Author: 白川 杏 baiyufeisteam@163.com
 * @Date: 2023-05-15 14:59:26
 * @LastEditors: 白川 杏 baiyufeisteam@163.com
 * @LastEditTime: 2023-05-17 13:46:22
 * @FilePath: \junior-project-training\backend\vueproject\src\components\LoginPage.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div :style="bgImg" class="img1">
        <h2>百草园后台管理系统</h2>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="用户名" prop="name" style="color: wheat;">
                <el-input v-model="ruleForm.name"></el-input>
            </el-form-item>

            <el-form-item label="密码" prop="pwd">
                <el-input v-model="ruleForm.pwd" show-password></el-input>
            </el-form-item>

            <span class="block">
                <el-form-item label="验证码" prop="test">
                    <el-input v-model="ruleForm.test" id="code"></el-input>
                </el-form-item>
                <el-form-item>
                    <span v-html="captcha" @click="getCaptcha"></span>
                </el-form-item>
                <!-- <button onclick="getCode">获取验证码</button>
                <img id="codeImg" src='http://localhost:8080/code'> -->
            </span>

            <el-form-item class="buttonpart">
                <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script>
import router from '@/router';
import axios from 'axios';
import console from 'console';
import { useCookies } from "vue3-cookies";

export default {
    setup() {
        const { cookies } = useCookies();
        return { cookies };
    },
    data() {
        const codeNum = '';
        return {
            loginS: '',
            formCheck: [],
            codeNum,
            currentPage: 1,
            key: 0,
            bgImg: {
                width: '100%',
                minHeight: '100vh',
                background: "url(" + require("../../public/bg.jpg") + ") center center no-repeat",
                backgroundSize: '100% 100%',
                position: 'absolute',
                color: 'wheat'
            },
            stylePage: {
                marginLeft: '50%'
            },
            ruleForm: {
                name: '',
                pwd: '',
                test: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                pwd: [
                    { required: true, message: '请输入密码', trigger: 'blur' },
                    { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                ],
                test: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ]
            },
            captcha: ''
        }
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate(
                async (valid) => {
                    if (valid) {
                        if (valid) {
                            console.log(this.ruleForm);

                            axios({
                                method: 'post',
                                url: 'http://localhost:8080/login',
                                withCredentials: true,
                                data: this.ruleForm,
                                headers: {
                                    'Content-type': 'application/x-www-form-urlencoded',
                                }
                            }).then(res => {
                                if (res.data.msg == 'success') {
                                    this.$message({
                                        message: "登陆成功",
                                        type: 'success'
                                    })
                                    console.log(res.data);
                                    if (res.data.token) {
                                        localStorage["token"] = res.data.token
                                        localStorage['username'] = this.ruleForm.name
                                    }
                                    // this.getToken()
                                    this.$router.push({
                                        path: '/user'
                                    })
                                    // this.getToken()

                                } else {
                                    this.$message({
                                        message: "登陆失败",
                                        type: 'fail'
                                    })

                                }
                            })
                            // const res = await axios.post("/login", this.ruleForm)

                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    }
                });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        async getCaptcha() {
            // const res = await axios.get("/code")
            axios({
                method: 'get',
                url: 'http://localhost:8080/code',
                withCredentials: true,
                data: {
                    adminename: this.ruleForm.name,
                    adminepwd: this.ruleForm.pwd
                },
                headers: {
                    'Content-type': 'application/x-www-form-urlencoded',
                }
            }).then(res => {
                console.log(res);
                this.captcha = res.data
            })

        }
    },
    mounted() {
        this.getCaptcha();
    }
    // mounted() {
    //     this.codeNum = this.cookies.get("test");
    //     console.log(this.cookies.get("test"));
    //     // let my_cookie_value = this.cookies.get("myCoookie");
    //     // console.log(my_cookie_value);
    //     // this.cookies.set("myCoookie", "abcdefg");
    // }
}
</script>
<style>
.demo-ruleForm {
    width: 400px;
    float: right;
    margin-top: 150px;
    margin-right: 40px;
}

.block {
    margin-left: 50px;
}

img {
    margin-left: 30px;
}

button {
    margin-left: 50px;
}


.buttonpart {
    margin-top: 10px;
}
</style>